<template>
  <div class="UserShip">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="cardP">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>基准信息查询条件</span>

                <button
                  style="float: right;"
                  type="button"
                  class="btn btn-primary"
                  @click="getPUserList()"
                >
                  查询
                </button>
              </div>

              <div class="pucLabel SS">
                <el-row>
                  <el-col :span="12">
                    <p style="margin: 1rem">
                      <label> &nbsp; &nbsp; &nbsp;EMPI：</label>
                      <input
                        type="text"
                        class="form-control"
                        v-model="getPUserListObj.empi"
                      />
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p style="margin: 1rem">
                      <label>&nbsp; &nbsp; &nbsp;性别 :</label>
                      <select
                        class="form-control"
                        v-model="getPUserListObj.sex"
                        placeholder="请选择"
                      >
                        <option
                          v-for="(item, index) in sexList"
                          :label="item.Name"
                          :value="item.Code"
                          :key="index"
                        ></option>
                      </select>
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p style="margin: 1rem">
                      <label>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;姓名：</label
                      >
                      <input
                        type="text"
                        class="form-control"
                        v-model="getPUserListObj.xm"
                      />
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p style="margin: 1rem">
                      <label> &nbsp;&nbsp;机构号 :</label>
                      <select
                        class="form-control"
                        v-model="getPUserListObj.yljg"
                        placeholder="请选择"
                      >
                        <option
                          v-for="(item, index) in zzjgList"
                          :label="item.name"
                          :value="item.code"
                          :key="index"
                        ></option>
                      </select>
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p style="margin: 1rem">
                      <label>身份证号：</label>
                      <input
                        type="text"
                        class="form-control"
                        v-model="getPUserListObj.sfzh"
                      />
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p style="margin: 1rem">
                      <label>就诊卡号:</label>
                      <input
                        type="text"
                        class="form-control"
                        v-model="getPUserListObj.jzkh"
                      />
                    </p>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <div class="fjtable ypList">
              <el-table
                ref="singleTable"
                :data="dataList"
                height="308"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%"
              >
                <el-table-column property="empi" label="EMPI" width="80">
                </el-table-column>
                <el-table-column property="xm" label="姓名" width="80">
                </el-table-column>
                <el-table-column property="xb" label="性别" width="60">
                </el-table-column>
                <el-table-column property="csrq" label="出生日期">
                </el-table-column>
                <el-table-column property="sfzh" label="身份证号">
                </el-table-column>
                <el-table-column property="jzkh" label="就诊卡号">
                </el-table-column>
                <el-table-column property="jkkh" label="健康卡号">
                </el-table-column>
                <el-table-column property="ybkh" label="医保卡号">
                </el-table-column>
                <el-table-column property="lxdh" label="联系电话">
                </el-table-column>
                <el-table-column property="zxdz" label="现住地址">
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              @current-change="handleCurrentChange2"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="cardP">
            <el-card v-if="false" class="box-card">
              <div slot="header" class="clearfix">
                <span>患者原始数据查询</span>

                <button
                  style="float: right;"
                  type="button"
                  class="btn btn-primary"
                  @click="addData()"
                >
                  查询
                </button>
              </div>

              <div class="pucLabel SS">
                <el-row>
                  <el-col :span="12">
                    <p>
                      <label>EMPI：</label>
                      <input type="text" class="form-control" />
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p>
                      <label>性别:</label>
                      <select class="form-control" placeholder="请选择">
                        <option
                          v-for="(item, index) in hzfsList"
                          :label="item.name"
                          :value="item.code"
                          :key="index"
                        ></option>
                      </select>
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p>
                      <label>姓 名：</label>
                      <input type="text" class="form-control" />
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p>
                      <label>院号:</label>
                      <input type="text" class="form-control" />
                    </p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <p>
                      <label>身份证号：</label>
                      <input type="text" class="form-control" />
                    </p>
                  </el-col>
                  <el-col :span="12">
                    <p>
                      <label>卡号:</label>
                      <input type="text" class="form-control" />
                    </p>
                  </el-col>
                </el-row>
              </div>
            </el-card>
            <el-tabs
              v-model="activeName"
              type="border-card"
              @tab-click="handleClick"
            >
              <el-tab-pane label="已关联记录" name="1">
                <div class="fjtable ypList">
                  <el-table
                    ref="singleTable"
                    :data="dataListYGL"
                    height="518"
                    highlight-current-row
                    style="width: 100%"
                  >
                    <el-table-column property="empi" label="EMPI" width="80">
                    </el-table-column>
                    <el-table-column property="xm" label="姓名" width="80">
                    </el-table-column>
                    <el-table-column property="xb" label="性别" width="60">
                    </el-table-column>
                    <el-table-column property="csrq" label="出生日期">
                    </el-table-column>
                    <el-table-column property="sfzh" label="身份证号">
                    </el-table-column>
                    <el-table-column property="jzkh" label="就诊卡号">
                    </el-table-column>
                    <el-table-column property="jkkh" label="健康卡号">
                    </el-table-column>
                    <el-table-column property="ybkh" label="医保卡号">
                    </el-table-column>
                    <el-table-column property="lxdh" label="联系电话">
                    </el-table-column>
                    <el-table-column property="zxdz" label="现住地址">
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="80">
                      <template slot-scope="scope">
                        <el-button
                          @click.native.prevent="
                            deleteRow(scope.$index, dataListYGL)
                          "
                          type="text"
                          size="small"
                        >
                          取消关联
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="疑似相关记录" name="2">
                <div class="fjtable ypList">
                  <el-table
                    ref="singleTable"
                    :data="dataListYSGL"
                    height="518"
                    highlight-current-row
                    style="width: 100%"
                  >
                    <el-table-column property="empi" label="EMPI" width="80">
                    </el-table-column>
                    <el-table-column property="xm" label="姓名" width="80">
                    </el-table-column>
                    <el-table-column property="xb" label="性别" width="60">
                    </el-table-column>
                    <el-table-column property="csrq" label="出生日期">
                    </el-table-column>
                    <el-table-column property="sfzh" label="身份证号">
                    </el-table-column>
                    <el-table-column property="jzkh" label="就诊卡号">
                    </el-table-column>
                    <el-table-column property="jkkh" label="健康卡号">
                    </el-table-column>
                    <el-table-column property="ybkh" label="医保卡号">
                    </el-table-column>
                    <el-table-column property="lxdh" label="联系电话">
                    </el-table-column>
                    <el-table-column property="zxdz" label="现住地址">
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="80">
                      <template slot-scope="scope">
                        <el-button
                          @click.native.prevent="
                            linkRow(scope.$index, dataListYSGL)
                          "
                          type="text"
                          size="small"
                        >
                          关联
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {},
      getPUserListObj: {
        empi: "",
        sex: "",
        xm: "",
        yljg: "",
        sfzh: "",
        jzkh: "",
        page: "1",
        limit: "30",
      },
      sexList: [],
      zzjgList: [],
      total: 1,
      dataList: [],
      dataListYGL: [],
      dataListYSGL: [],
      selectPUser: {},
      /***********************************************************************/
      activeName: "1",
      model_query: [],
      changeSelectStyle: -1,
      data: [],
      id: 1000,
      defaultProps: {
        // children: "childs",
        label: "name2",
      },
      listdata: [],
      Idlist: [],
      inindex: "",
      multipleTable: [],

      /*************************************************************************/
      datalist: [
        {
          ParentId: 0,
          PermissionId: -1,
          PermissionName: "权限列表",
          Url: "",
          childs: [
            {
              ParentId: -1,
              PermissionId: 3,
              PermissionName: "首页",
              Url: "/Bedinformation",
              childs: [],
            },
            {
              ParentId: -1,
              PermissionId: 3,
              PermissionName: "首页2",
              Url: "/Bedinformation",
              childs: [],
            },
          ],
        },
      ],
      data: [
        {
          PermissionName: "一级 3",
          childs1: [
            {
              PermissionName: "二级 3-1",
              childs1: [],
            },
            {
              PermissionName: "二级 3-2",
              childs1: [],
            },
          ],
        },
      ],

      RoleObj: null,
      PermissionsMenuList: [],
      Permissions: [],
      RolePermissionList: [],
      /***********************************************************************/

      selectZZJG: {},
      deptList: [],
      userList: [],
      userDeptList: [],
      selectUser: null,
      deptIds: [],
    };
  },
  methods: {
    getDataList() {
      this.sexList = [];
      var params = {
        Kind: "Sex",
      };
      //GET /v1/BaseDict
      this.$get("BaseDict", params)
        .then((res) => {
          this.sexList = res.data;
          console.log("字典列表查询结果");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getZZJGList() {
      this.zzjgList = [];
      var params = {
        name: "",
      };
      this.$get("notoken/organs", params)
        .then((res) => {
          //this.total = res.data.totalCount;
          this.zzjgList = res.data;

          console.log("组织机构列表查询结果");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.getPUserListObj.page = val;
      this.getPUserList();
    },
    handleCurrentChange(val) {
      console.log("选中患者");
      this.selectPUser = val;
      this.getYGLList();
    },
    deleteRow(index, rows) {
      //拆分
      // rows.splice(index, 1);
      this.CFUserData(rows[index].id);
    },
    linkRow(index, rows) {
      //关联
      // rows.splice(index, 1);
      this.HBUserData(rows[index].id);
    },
    getPUserList() {
      this.dataList = [];
      var params = this.getPUserListObj;
      //GET /v1/empi
      this.$get("empi", params)
        .then((res) => {
          console.log("患者列表查询结果");
          console.log(res);
          this.total = res.data.TotalCount;
          this.dataList = res.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //监听
    handleClick(tab, event) {
      console.log("切换");
      console.log(tab, event);
      console.log(tab.name);
      if (tab.name == 1) {
        this.getYGLList();
      } else if (tab.name == 2) {
        this.getYSXGList();
      }
    },
    //GET /v1/empi/{Id}/Relations
    getYGLList() {
      if (this.selectPUser == null) {
        this.$message({
          showClose: true,
          message: "请选择患者！",
          type: "error",
        });
        return;
      }
      this.dataListYGL = [];
      var params = {};
      //GET /v1/empi
      this.$get("empi/" + this.selectPUser.id + "/Relations", params)
        .then((res) => {
          console.log("患者列表查询结果");
          console.log(res);
          this.dataListYGL = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //GET /v1/empi/{Id}/Sames
    getYSXGList() {
      if (this.selectPUser == null) {
        this.$message({
          showClose: true,
          message: "请选择患者！",
          type: "error",
        });
        return;
      }
      this.dataListYGL = [];
      var params = {};
      //GET /v1/empi
      this.$get("empi/" + this.selectPUser.id + "/Sames", params)
        .then((res) => {
          console.log("患者列表查询结果");
          console.log(res);
          this.dataListYGL = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //合并
    HBUserData(id) {
      if (this.selectPUser == null) {
        this.$message({
          showClose: true,
          message: "请选择患者！",
          type: "error",
        });
        return;
      }

      var params = {
        numbers: [id],
      };
      //POST /v1/empi/{Id}/Merge
      this.$post("empi/" + this.selectPUser.id + "/Merge", params)
        .then((res) => {
          console.log("对照完成");
          console.log(res);
          if (res.code == 0) {
            this.getYSXGList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //拆分
    CFUserData(id) {
      if (this.selectPUser == null) {
        this.$message({
          showClose: true,
          message: "请选择患者！",
          type: "error",
        });
        return;
      }

      var params = {
        numbers: [id],
      };
      //POST /v1/empi/{Id}/Split
      this.$post("empi/" + this.selectPUser.id + "/Split", params)
        .then((res) => {
          console.log("对照完成");
          console.log(res);
          if (res.code == 0) {
            this.getYGLList();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /*************************************/
    queryList() {
      this.getUserList();
      this.getDeptList();
    },
    getUserList() {
      this.userList = [];
      if (this.selectZZJG == null) {
        this.$message({
          showClose: true,
          message: "请选择操作机构！",
          type: "error",
        });
        return;
      }
      var params = {
        HospitalId: this.selectZZJG.HospitalId,
        name: "",
      };
      this.$get("User/GetList", params)
        .then((res) => {
          this.userList = res.data;
          console.log("用户列表查询结果");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDeptList() {
      this.deptList = [];

      if (this.selectZZJG == null) {
        this.$message({
          showClose: true,
          message: "请选择操作机构！",
          type: "error",
        });
        return;
      }
      var params = {
        HospitalId: this.selectZZJG.HospitalId,
        name: "",
      };
      this.$get("Dept/GetList", params)
        .then((res) => {
          console.log("科室列表查询结果");
          // console.log(res);
          // this.deptList = res.data;
          res.data.forEach((m) => {
            m.childs2 = [];
            m.name2 = m.Name;
            console.log(m);
            this.deptList.push(m);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCheck(checkedNodes, checkedKeys) {
      console.log("选中科室");
      console.log(checkedKeys.checkedNodes);
      this.userDeptList = checkedKeys.checkedNodes;
    },
    openDetails(row, index) {
      console.log("选中用户");
      console.log(row);
      console.log(index);
      this.changeSelectStyle = index;
      this.selectUser = row;
      this.queryUserDeptList(this.selectUser.UserId);
    },
    //保存用户科室对照
    saveUserDeptList() {
      if (this.selectUser == null) {
        this.$message({ message: "选择用户后保存", type: "success" });
        return;
      }
      this.userDeptList.forEach((m) => {
        this.deptIds.push(m.Id);
      });
      var params = {
        UserId: this.selectUser.UserId,
        Depts: this.deptIds,
      };
      //POST /api/User/MatchSection
      this.$post("User/MatchSection", params)
        .then((res) => {
          console.log("对照完成");
          console.log(res);
          if (res.code == 0) {
            this.$refs.tree.setCheckedKeys([]);
            this.selectUser = null;
            this.changeSelectStyle = -1;
            this.deptIds = [];
            this.userDeptList = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //用户科室列表查询
    queryUserDeptList(UserId) {
      this.userDeptList = [];
      var params = {
        UserId: UserId,
      };
      //GET /api/User/GetSectionList
      this.$get("User/GetSectionList", params)
        .then((res) => {
          console.log("角色权限列表查询结果");
          console.log(res);
          if (res.code == 0) {
            this.userDeptList = res.data;
            var PermissionIdList = [];
            for (var i = 0; i < this.userDeptList.length; i++) {
              PermissionIdList.push(this.userDeptList[i].DeptId);
            }
            this.$refs.tree.setCheckedKeys(PermissionIdList);
          } else {
            this.$refs.tree.setCheckedKeys([]);
          }
        })
        .catch((err) => {
          this.$refs.tree.setCheckedKeys([]);
          console.log(err);
        });
    },
    /********************************************/
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1",
        },
        {
          id: 9,
          label: "三级 1-1-1",
        },
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    /*************************************************************************/

    getSElect(rows) {
      for (var i = 0; i < rows.length; i++) {
        if (rows[i].HaveFun == 1) {
          this.multipleTable.push(rows[i]);
          // this.Fanselectful();
        } else {
          return;
        }
      }
    },
    Fanselectful() {
      console.log(this.multipleTable);
      if (this.multipleTable) {
        this.multipleTable.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    Prescessful() {
      console.log(this.Idlist);
      var datalist = {
        model: "11.综合维护-角色与权限",
        code: "11061",
        input: {
          role_id: this.inindex,
          powers: this.Idlist,
        },
      };
      this.$post("CloudHIS/Business_Handle", datalist)
        .then((res) => {
          if (res.code == 0) {
            this.$message({ message: "保存成功", type: "success" });
          } else {
            this.$message({ showClose: true, message: res.msg, type: "error" });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gettr(item) {
      this.Idlist = [];
      console.log(item);
      item.forEach((v) => {
        this.Idlist.push(v.id);
      });
      this.multipleSelection = item;
    },
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getZZJGList();
    this.getDataList();
  },
};
</script>
<style lang="scss">
.UserShip {
  .ypList {
    .el-input__inner {
      height: 20px !important;
      padding: 0 0 0 15px !important;
    }

    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: 10px !important;
      height: 40px;
      line-height: 40px;

      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }

    .el-autocomplete-suggestion li {
      padding: 0px 6px !important;
      margin: 0;
      line-height: 34px;
      cursor: pointer;
      color: #606266;
      font-size: 10px !important;
      list-style: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .SS {
    .form-control {
      display: inline-block;
      width: 18rem;
      height: 32px;
      padding: 5px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      -webkit-transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
        -webkit-box-shadow ease-in-out 0.15s;
    }
  }

  .cardP {
    .text {
      font-size: 14px;
    }

    .el-card__header {
      padding: 18px 20px;
      border-bottom: 1px solid #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: azure;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 100%;
    }
  }

  .Privilege .LeftMain {
    position: absolute;
    width: 365px;
    top: 86px;
    left: 0;
    bottom: 10px;
    border-right: 1px solid #ddd;
  }

  .Privilege .LeftMain .Tb {
    overflow-y: auto;
    position: absolute;
    top: 1px;
    left: 10px;
    right: 10px;
    bottom: 0;
    border: 1px solid #ddd;
  }

  .Privilege .LeftMain .Tb table {
    border: none;
  }

  .Privilege .LeftMain .Tb table td:first-child {
    border-left: none;
  }

  .Privilege .LeftMain .Tb table td:last-child {
    border-right: none;
  }

  .Privilege .LeftMain .Tb table tr {
    cursor: pointer;
  }

  .Privilege .LeftMain .Tb table tr td {
    cursor: pointer;
  }

  .Privilege .RightMain {
    padding-left: 365px;
  }

  .Privilege .RightMain input {
    position: relative;
    top: 1px;
    margin-right: 5px;
  }

  .Privilege .RightMain label {
    cursor: pointer;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .RightMain .Tb {
    position: absolute;
    top: 116px;
    left: 372px;
    right: 5px;
    bottom: 10px;
    overflow: auto;
    border: 1px solid #ddd;
  }
}
</style>
